import React from 'react'
import { increment, decrement } from './store/actions/calc'
import { useSelector, useDispatch } from 'react-redux'
import Test from './components/Test'

export default function App() {
  const dispatch = useDispatch()
  // !#3 获取数据：形参 state 表示整个应用的状态，返回 state 就表示把整个应用的状态返回
  const count = useSelector((state) => state)
  return (
    <div style={{ textAlign: 'center' }}>
      {/* 获取数据 */}
      <h2>{count}</h2>
      <div>
        {/* // !#4 更新数据的写法变了 */}
        <button onClick={() => dispatch(increment(1))}>+1</button>
        <button onClick={() => dispatch(increment(5))}>+5</button>
        <button onClick={() => dispatch(decrement(1))}>-1</button>
        <button onClick={() => dispatch(decrement(7))}>-7</button>
      </div>
      <Test />
    </div>
  )
}
